import React,{useState,useEffect} from 'react'
/* 
    1.useEffect的说明
    useEffect函数作用，参数不一样useEffect作用不一样
    useEffect主要作用是完成副作用，函数组件中没有this,没有state,没有生命周期
    一般情况下，我们使用useEffect去模拟生命周期
    1.useEffect语法
    useEffect(参数1，参数2)
    参数1：是一个回调函数
    参数2：是一个数组，这个数组可以有可无，数组有和没有产生的效果一点都不一样
    2.useEffect参数说明
    1）如果没有第2个参数的情况，相当于类组件中的componentDidMount和componentDidUpdate
    如果没有第2个参数,useEffect中的一个参数（回调函数），在组件挂载阶段会执行一次，在运行阶段，每次数据只要变化一次，都会执行一次
    2) 如果有第2个参数，并且第二个参数是一个[]数组，模拟了类组件中的componentDidMount。
    useEffect的第一个参数只在挂载节点执行一次，后续将不再被执行
    3) 如果有第2个参数，并且第二个参数的数组不是一个空数组，类似于vue中的watch
*/
export default function ClickedTimes() {
  const [count,setCount]=useState(0)
  const [num,setNum]=useState(10)
  //如下函数的完成的是主作用
  const clickedTimes=()=>{
    setCount(count+1)
  }
//   useEffect(()=>{
//     console.log("*******useEffect*************");
//     document.title=`You clicked ${count} times`
//   })
//   useEffect(()=>{
//     console.log("*******useEffect*************");
//     document.title=`You clicked ${count} times`
//   },[])

  useEffect(()=>{
    console.log("*******useEffect*************");
  },[num])

  return (
    <div>
        <p>You clicked {count} times</p>
        <p>num:{num}</p>
        <button onClick={()=>{clickedTimes()}}>点击</button>
        <button  onClick={()=>{setNum(num+10)}}>change num</button>
    </div>
  )
}
